<template>
  <div class="doctor">
    <div class="eachdoc"
      v-for="tab in tabs"
      :key="`tab-${tab.id}`"
    >
      <img :src="tab.src" alt="">
      <p><b style="font-size:14px;margin-right:10px; color:black;">{{tab.name}}</b> &nbsp;&nbsp;<span>副主任医师 &nbsp;内科</span></p>
      <router-link to="/type">资讯医生</router-link>
      <p><span>{{tab.num}}</span>{{tab.hospital}}</p>
      <p>擅长：{{tab.type}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Doctor',
  data () {
    return {
      tabs: []
    }
  },
  created () {
    this.$http.getEachdoc()
      .then(resp => {
        console.log(resp)
        this.tabs = resp.data.body.title
      })
  }
}
</script>

<style lang="scss">
.doctor {
  margin-top: 10px;
  background-color: white;
  font-size: 14px;
  .eachdoc {
    height: 80px;
    line-height: 25px;
    padding:15px 10px 10px 90px;
    // background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2606101010,2981671716&fm=26&gp=0.jpg) no-repeat 20px center;
    // background-size: 50px 50px;
    border-bottom: 1px solid #eee;
    position:relative;
    img {
      width:50px;
      height:50px;
      position: absolute;
      left:20px;
      top:25px;
    }
    a {
      font-size: 12px;
      position: absolute;
      right:20px;
      top:35px;
      background-color: rgb(113, 177, 247);
      color:white;
      padding:0 5px;
      border-radius: 10px;
    }
    p {
      color: #666;
      font-size: 12px;
      span {
        background-color: rgb(113, 177, 247);
        font-weight:500;
        padding:1px;
        margin-right: 10px;
        border-radius: 3px;
        color: white;
      }
    }
  }
}
</style>
